<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import type { ComponentSize } from 'element-plus'
import { queryAllCartsByUid } from '../assets/net/NetUtils';
import { userInfoStore } from '../assets/userStore/userStore';
import ShoppingCarCard from './ShoppingCarCard.vue';
import { CartsModel } from '../assets/model/Carts';

const userStore = userInfoStore()
const size = ref<ComponentSize>('default')
const carts = ref<Array<CartsModel>>();
const isEmpty = ref<boolean>()

onMounted(() => {
    queryAllCartsByUid(userStore.uid)
        .then((value) => {
            carts.value = value.data
            isEmpty.value = value.data.length === 0 ? true : false;
        })
})

</script>

<template>
    <el-scrollbar height="100%">
        <el-empty v-show="isEmpty" description="购物车里空空如也～" />
        <el-space wrap :size="size" fill>
            <div v-for="item in carts" :key="item.cid">
                <ShoppingCarCard :carts="item" v-model="carts"></ShoppingCarCard>
            </div>
        </el-space>
    </el-scrollbar>
</template>